<template>
    <el-container class="container-left">
      <el-main class="container-left-main">
        <div class="container-left-main-card-top">
          <div class="main-card-top-tabchange">
            <el-button
              size="large"
              v-for="(button, index) in buttons"
              :key="index + 1"
              :type="button.type"
              text
              @click="num = index"
              :class="{ active: num == index }"
              >{{ button.text }}</el-button
            >
          </div>
          <div>
            <el-button type="primary" round color="#f93684" class="createbutton">创建</el-button
            >
          </div>
        </div>
        <el-card class="container-left-main-card-buttom">
          <div class="practiseAll" 
          v-for="(item,index) in danceList" 
          :key="item.id" v-show="num == 0" 
          @click="router.push('/detail/training')">
            <div class="partone">
              <img
                style="width: 180px; border-radius: 5%"
                :src="item.momentBackup.cover"
              />
            </div>
            <div class="parttwo">
              <h3>{{item.momentTitle}}</h3>
              <span>当前播放0秒</span>
            </div>
            <div class="partthree">
              <el-icon><Clock /></el-icon>
              <span>尚未开始</span>
            </div>
          </div>
          <div class="practiseCreate" v-show="num == 1">
          <img src="./images/暂无更多数据.png" alt="">
          </div>
          <div class="practiseAll" v-for="item in danceList" v-show="num == 2">
            <div class="partone">
              <img
                style="width: 180px; border-radius: 5%"
                :src="item.momentBackup.cover"
              />
            </div>
            <div class="parttwo">
              <h3>{{item.momentTitle}}</h3>
              <span>当前播放0秒</span>
            </div>
            <div class="partthree">
              <el-icon><Clock /></el-icon>
              <span>尚未开始</span>
            </div>
          </div>
          <div class="practiseAll" v-for="item in danceList" v-show="num == 3">
            <div class="partone">
              <img
                style="width: 180px; border-radius: 5%"
                :src="item.momentBackup.cover"
              />
            </div>
            <div class="parttwo">
              <h3>{{item.momentTitle}}</h3>
              <span>当前播放0秒</span>
            </div>
            <div class="partthree">
              <el-icon><Clock /></el-icon>
              <span>尚未开始</span>
            </div>
          </div>
          <!-- <div v-for="(a,index) in list" :key="index" v-show="num==index">{{a}}</div> -->
        </el-card>
      </el-main>
    </el-container>
  </template>
  
  <script lang="ts">
  import { defineComponent } from "vue";
import { result } from "lodash";
  
  export default defineComponent({
    name: "moren",
  });
  </script>
  
  <script setup lang="ts">
  import { onMounted, ref } from "vue";
  import {reqgetDanceInfo} from "@/api/parctice/parctice";
  import type {Content,Data} from "@/api/parctice/parctice"
  import { useRouter } from "vue-router";
  const router = useRouter();
  const buttons = [
    { type: "", text: "全部" },
    { type: "", text: "我创建的" },
    { type: "", text: "我加入的" },
    { type: "", text: "我的课程" },
  ];
  const num = ref<number>(0);
  // 舞蹈信息的基本数据
  const danceList = ref<any>([]);
  const getDanceInfoList = async (pageNum:number,pageSize:number)=>{
    const result = await reqgetDanceInfo(pageNum,pageSize);
    console.log(result);
    console.log(result.content);
    danceList.value = result.content
    console.log(danceList.value);
  }

  // 在onMounted初始挂载
  onMounted(() => {
    getDanceInfoList(1,10)
  })
  
 
  </script>
  
  <style lang="less">
      .container-left {
        .container-left-main {
          .container-left-main-card-top {
            display: flex;
            justify-content: space-between;
            box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
            border: 1px solid #e7e8e9;
            height: 40px;
            border-radius: 2%;
            background-color: #fff;
            padding: 25px 30px;
            
          }
          .container-left-main-card-buttom {
            margin-top: 20px;
            height: 800px;
            .practiseAll {
              display: flex;
              justify-content: space-between;
              border-bottom: 1px solid #e1e1e1;
              margin-top: 20px;
              padding-bottom: 10px;
              .partone {
                margin: 10px;
              }
              .parttwo {
                margin-top: 10px;
                padding-right: 350px;
                span {
                  margin-top: 20px;
                  font-size: 13px;
                  color: #7d8090;
                }
              }
              .partthree {
                margin-top: 40px;
              }
            }
            .practiseCreate{
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              text-align: center;
              min-height: 600px;
            }
          }
        }
      }
  </style>